import './index.less';
import {StageListProps, Stage} from './interface';
import React, {useEffect, useMemo, useState} from 'react';
import {ProjectSize, ProjectSizeItem} from '@/components';
import {
    Flex,
    Button,
    InputGroup,
    InputLeftElement,
    Input,
    Text,
    Box,
    Image,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalCloseButton,
    ModalBody,
    ModalFooter,
    InputRightElement,
    useBoolean
} from '@chakra-ui/react';
import {SearchIcon, CloseIcon, CheckIcon} from '@chakra-ui/icons';
import DefaultToast, {Toast} from '@/utils/defaultToast';
import {StageAPI} from '@/api';
export * from './interface';
const StageList = (props: StageListProps) => {
    const {project} = props;

    if (!project) {
        return null;
    }

    const Toast: Toast = DefaultToast();
    const [showAddModal, setShowAddModal] = useBoolean(false);
    const [isExist, setIsExist] = useBoolean(false);
    const closeAddModal = () => {
        resetStage();
        setShowAddModal.off();
    };

    useEffect(() => {
        StageAPI.getStage().then((res: Stage[]) => {
            setStageItems([...res]);
        });
    }, []);
    const resetStage = () => {
        setStage({h: 0, name: '', parentId: project.id, w: 0, typeDisplay: 'web'});
    };
    const [stage, setStage] = useState<Stage>({
        h: 0,
        name: '',
        parentId: project.id,
        w: 0,
        typeDisplay: 'web'
    });

    const confirmAddStage = () => {
        if (!stage.name) {
            Toast.error('请输入项目名称');
            return;
        }
        if (isExist) {
            Toast.error('已存在相同名称的项目');
            return;
        }
        const {id, ...rest} = stage;
        StageAPI.addStage({
            ...rest,
            parentId: project.id
        }).then((res: Stage[]) => {
            setStageItems([...res]);
            resetStage();
            closeAddModal();
        });
    };
    const [stageItems, setStageItems] = useState<Stage[]>([]);
    const stageNameChanged = (target: EventTarget & HTMLInputElement) => {
        const idx = stageItems.findIndex((item) => item.name === target.value);
        idx >= 0 ? setIsExist.on() : setIsExist.off();
        stage.name = target.value;
        setStage({...stage});
    };

    const getProjectSize = (result: ProjectSizeItem) => {
        const {width, height, text} = result;
        setStage({
            h: height,
            id: stage.id,
            name: stage.name,
            parentId: stage.parentId,
            w: width,
            typeDisplay: text
        });
    };
    return (
        <div className="__temp-stage-list">
            <Modal isOpen={showAddModal} onClose={closeAddModal} closeOnOverlayClick={false} size="4xl">
                <ModalOverlay />
                <ModalContent>
                    <ModalHeader>新建</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody>
                        <InputGroup>
                            <Input
                                placeholder="项目名称"
                                isRequired={true}
                                value={stage.name}
                                onChange={({target}) => stageNameChanged(target)}
                            />
                            <InputRightElement>
                                {!stage.name || isExist ? (
                                    <CloseIcon color="red.500" />
                                ) : (
                                    <CheckIcon color="green.500" />
                                )}
                            </InputRightElement>
                        </InputGroup>
                        <ProjectSize getResult={getProjectSize} />
                    </ModalBody>
                    <ModalFooter>
                        <Button marginRight="20px" onClick={closeAddModal}>
                            取消
                        </Button>
                        <Button variant="ghost" onClick={confirmAddStage}>
                            确定
                        </Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>
            <Flex justify="space-between" h="60px" alignItems="center" className="header">
                <Text fontSize="3xl" fontWeight="900" color="#273c75">
                    {project.name}
                </Text>
                <Flex>
                    <Button bgColor="#8c7ae6" color="#fff" size="md" marginRight="20px" onClick={setShowAddModal.on}>
                        新建
                    </Button>
                    <InputGroup w="300px">
                        <InputLeftElement>
                            <SearchIcon />
                        </InputLeftElement>
                        <Input></Input>
                    </InputGroup>
                </Flex>
            </Flex>
            <Flex
                h="calc(100% - 60px)"
                w="100%"
                className="container"
                flexWrap="wrap"
                border={stageItems.length > 0 ? '1px solid #d2d0d0' : ''}
                boxShadow={stageItems.length > 0 ? '0 0 20px 5px #d2d0d0 inset' : ''}>
                {stageItems
                    .filter((stage) => stage.parentId === props.project.id)
                    .map((item, index) => {
                        return (
                            <Flex
                                w="20%"
                                h="240px"
                                className="stage_item"
                                direction="column"
                                justify="space-between"
                                key={index}>
                                <Image />
                                <Box>{index}</Box>
                            </Flex>
                        );
                    })}
            </Flex>
        </div>
    );
};
export default StageList;
